/*Reset CSS*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  vertical-align: baseline; }


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

html,
body {
  /* font-family: "Open Sans", Arial; */
  font-family: "Karla", sans-serif;
  font-size: 16px;
  color: #333;
  font-weight: 300;
  height: 100%; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

a {
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  /*transition: all 0.2s;*/
  outline: none;
  text-decoration: none; }

input::-ms-clear {
  display: none; }

input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}

*[href^=tel]{
    color:inherit;
    text-decoration:none;
}

  /*reusable styles here*/
h1 {
  text-align: center;
  color: #f87022;
  font-size: 26px;
  line-height: 1.25em;
  font-weight: 500;
  padding-top: 31px;
  padding-bottom: 16px;
}
  h1 i {
    display: inline-block;
    vertical-align: top;
    width: 47px;
    height: 47px;
    background-position: -280px -156px;
  }
  h1 span {
    padding-top: 22px;
    display: block;
  }
.hide {
  display: none;
}
/*for mobile*/
.container {
  width: 92%;
  margin: 0 auto;
}
.sprite {
  background: url(../i/icon-sprites-ret.png) no-repeat 0 0;
  background-size: 448px 581px;
}
/*button style*/
.btn {
  border-radius: 4px;
  display: inline-block;
  vertical-align: top;
  padding: 14px 6px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  background: #38b624;
  border: none;
}
.btn:hover {
  background: #3bcb24;
  cursor: pointer;
}
.btnGray {
  background: #444;
}
.btnGray:hover {
  background: #121212;
}
.btnOrange {
  background: #f87022;
}
.btnOrange:hover {
  background: #ff843d;
}
/*select box styles*/
.select2-container .select2-selection--single {
  height: 40px;
}
.select2-container--default .select2-selection--single {
  border-radius: 0;
  outline: 0;
  border-color: #ccc;
}
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
    padding-left: 12px;
  }
  .select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-size: 14px;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    width: 47px;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow b {
    width: 14px;
    height: 9px;
    background: url(../i/icon-sprites-ret.png) no-repeat 0 0;
    background-size: 448px 581px;
    background-position: -339px -155px;
    border: 0;
    margin-left: -7px;
    margin-top: -4px;
  }
  .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    background-position: -339px -175px;
  }
/*range slider styles*/
.noUi-horizontal {
  height: 3px;
}
.noUi-base {
  height: 20px;
  top: -10px;
}
.noUi-background {
  background: #e4e4e4;
}
.withPips .noUi-background {
  background: transparent;
 /* background: #e4e4e4;*/
}
.noUi-target {
  border: 0;
  box-shadow: none;
}
  .noUi-handle {
    border: 0;
    background: #f87022;
    box-shadow: none;
    border-radius: 50%;
    height: 22px;
    width: 22px;
      background: url(../i/icon-sprites.png) no-repeat -162px -336px;
    background-size: 273px 358px;
  }
  .noUi-horizontal .noUi-handle {
    width: 22px;
    height: 22px;
    left: -6px;
    top: 0;
  }
  .noUi-handle:before, .noUi-handle:after {
    display: none;
  }
.noUi-pips-horizontal {
  z-index: -1;
  background: #e4e4e4;
  height: 3px;
  padding: 0;
  top: 0;
}
  .noUi-value {
    display: none;
  }
  .noUi-marker-horizontal.noUi-marker-large {
    height: 3px;
    width: 3px;
    background: #acacac;
  }
  .noUi-marker-horizontal.noUi-marker {
    width: 3px;
    height: 3px;
    border-radius: 2px;
    margin-top: 0;
    background: #acacac;
  }

  /* tooltip icon */
.tool-icon {
    vertical-align: middle;
    margin-left: 1px;
    height: 17px;
    width: 17px;
} 

.dashboardItems .tool-icon {
    height: 15px;
    width: 15px;
}
/*mobile first design*/
#header {
  background: #fff;
}
  #header .topBar {
    height: 57px;
  }
    #header .logo {
      display: inline-block;
      vertical-align: middle;
      width: 188px;
      height: 37px;
      background-position: -246px -10px;
      margin: 15px 0 0 9px;
    }
    #header .authWrap {
      float: right;
      height: 57px;
    }
      #header .authWrap a {
        line-height: 57px;
        font-size: 14px;
        color: #333;
      }
      #header .createAccount {
        display: none;
      }
  #mainNav {
    height: 56px;
    background: url(../i/main-nav-bg-ret.png) no-repeat 0 0;
    background-size: 100% 100%;
    text-align: center;
  }
  #mainNav.siteNav {
    background: #fff;
    border-bottom: 1px solid #e4e4e4;
    border-top: 1px solid #e4e4e4;
  }
    #mainNav .container,
    #mainNav .container ul {
      height: 100%;
    }
    #mainNav li {
      display: inline-block;
      float: left;
      height: 100%;
    }
    #mainNav .go {
      float: none;
    }
    #mainNav .track {
      float: right;
    }
      #mainNav li a {
        display: block;
        height: 20px;
        margin-top: 20px;
      }
      #mainNav .discover a {
        width: 131px;
        background-position: -83px -76px;
      }
        #mainNav .discover a:hover,
        #mainNav .discover.active a {
          background-position: -83px -111px;
        }
      #mainNav .go a {
        width: 38px;
        background-position: -236px -76px;
      }
        #mainNav .go a:hover,
        #mainNav .go.active a {
          background-position: -236px -111px;
        }
      #mainNav .track a {
        width: 89px;
        background-position: -290px -76px;
      }
        #mainNav .track a:hover,
        #mainNav .track.active a {
          background-position: -290px -111px;
        }

/*mainContent*/
#mainContent {
  min-height: 50px;
}
/* showCase */
#showCase {
  height: 321px;
  /* background: url(../i/showcase-bg.jpg) no-repeat 0 0; */
  background-size: cover;
  text-align: center;
  clear: both;
}
  #showCase .play {
    width: 39px;
    height: 39px;
    margin: 0 auto;
    background-position: -134px -203px;
    display: block;
    clear: both;
    position: relative;
    top: 93px;
  }
  #showCase .play:hover {
    background-position: -134px -159px;
  }
  #showCase p {
    color: #fff;
    font-size: 18px;
    margin: 0 9px 18px 9px;
    padding-top: 5px;
    line-height: 24px;
  }
  #showCase p span {
    background: rgba(0,0,0,0.5);
    padding:0.5%;
  }


    #showCase .btn {
      margin-right: 4px;
      min-width: 140px;
    }
/*quick info*/
#quickInfo {
  background: #f1f6fa;
}
  #quickInfo .info {
    padding-top: 38px;
    font-size: 15px;
    font-weight: 300;
    color: #666;
    line-height: 24px;
  }
    #quickInfo .info .highlight {
      color: #f87022;
    }
    #quickInfo .info strong {
      font-weight: 600;
    }
    #quickInfo .info .highlightS {
      font-weight: 400;
    }
  #quickInfo .imgArea {
    min-height: 1px;
  }
    #quickInfo .imgArea img {
      max-width: 100%;
    }
/*features*/
#features {
  background: #fff;
  padding-top: 40px;
}
  #features ul li {
    display: block;
    margin-bottom: 15px;
  }
    #features ul li .featureContent {
      margin-left: 74px;
    }
      #features ul li i {
        width: 59px;
        height: 59px;
        display: block;
        float: left;
        background-position: -6px 0;
      }
      #features ul .noEquipment i { background-position: -6px -78px; }
      #features ul .free i { background-position: -6px -155px; }
      #features ul .customizable i { background-position: -6px -233px; }
      #features ul .track i { background-position: -3px -311px; }
      #features ul li .featureContent h2 {
        color: #f87022;
        font-size: 20px;
        font-weight: 300;
        padding-bottom: 11px;
        text-align: left;
        padding-top: 0;
      }
      #features ul li .featureContent p {
        line-height: 24px;
        font-size: 12px;
        color: #666;
      }
/*user participation*/
#participate {}
  #participate .addSite {
    display: block;
    padding-top: 29px;
  }
    #participate .addSite .spot {
      width: 49px;
      margin: 0 auto;
      height: 55px;
      background-position: -10px -396px;
      margin-bottom: 14px;
    }
    #participate p {
      font-size: 15px;
      color: #666;
      line-height: 24px;
      font-weight: 300;
      text-align: center;
    }
      #participate p strong {
        color: #f87022;
        font-weight: 600;
      }
    #participate .addSite .playerArea {
      border: 1px solid #ccc;
      height: 243px;
      position: relative;
      margin-top: 19px;
    }
      #participate .addSite .playerArea .play {
        display: block;
        position: absolute;
        top: 50%;
        margin-top: -32px;
        left: 50%;
        margin-left: -32px;
        width: 66px;
        height: 66px;
        background-position: -193px -149px;
      }
      #participate .addSite .playerArea .play:hover {
        background-position: -193px -228px;
      }
  #participate .newAccount {
    display: block;
    padding-top: 30px;
    margin-bottom: 29px;
  }
    #participate .newAccount .spot {
      width: 48px;
      margin: 0 auto;
      height: 57px;
      background-position: -10px -474px;
      margin-bottom: 24px;
    }
    #participate .newAccount p {
      margin-bottom: 32px;
    }
    #participate .row {
      margin-bottom: 5px;
      border: 1px solid #ccc;
    }
    #participate .actionRow,
    #participate .captchaRow {
      border: 0;
    }
      #participate .row input {
        display: block;
        width: 80%;
        border: 0;
        outline: 0;
        padding: 14px 9px;
        color: #38b624;
        font-size: 15px;
      }
      #participate .row input::-webkit-input-placeholder { /* WebKit browsers */
        color:    #999;
      }
      #participate .row input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color:    #999;
        opacity:  1;
      }
      #participate .row input::-moz-placeholder { /* Mozilla Firefox 19+ */
        color:    #999;
        opacity:  1;
      }
      #participate .row input:-ms-input-placeholder { /* Internet Explorer 10+ */
        color:    #999;
      }
      #participate .actionRow .btn {
        display: block;
      }

/*footer style*/
#footer {
  background: rgb(232, 238, 253);
  padding-top: 44px;
  margin-bottom: 0;
  color: #ccc;
  /* padding-bottom: 56px; */
  position:relative;
  left:0;
  bottom:0;
  right:0;
}
  #footer .address {
    display: block;
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 40px;
  }
    #footer .address div {
      min-height: 32px;
      margin-bottom: 6px;
    }
    #footer .address i {
      float: left;
      width: 30px;
      height: 30px;
      background-color: #252525;
      border-radius: 15px;
      margin-top: 3px;
      background-position: -323px -488px;
    }
    #footer .tel i {
      background-position: -354px -488px;
    }
    #footer .email i {
      background-position: -382px -488px;
    }
    #footer .address p {
      margin-left: 44px;
      line-height: 20px;
    }
      #footer .address p span {
        display: block;
      }
    #footer .tel p,
    #footer .email p {
      line-height: 30px;
    }
  #footer .social,
  #footer .footerNote,
  #footer .footerNav {
    text-align: center;
    display: block;
    font-size: 13px;
    font-weight: 300;

  }
  #footer .social {
    margin-bottom: 24px;
  }
    #footer .social a {
      display: inline-block;
      vertical-align: top;
      width: 30px;
      height: 30px;
      background-color: #252525;
      border-radius: 15px;
      background-position: -412px -487px;
    }
    #footer .social .plus {
      background-position: -322px -518px;
    }
    #footer .social .twitter {
      background-position: -353px -516px;
    }
    #footer .social .facebook {
      background-position: -382px -514px;
    }
  #footer .footerNote {
    color: #999;
  }
  #footer .footerNav {
    margin-top: 8px;
  }
    #footer .footerNav a,
    #footer .footerNav .sep {
      color: #ccc;
    }

/*

Todays plan
Finish Site Detail page

*/
.siteDetail{
  padding-top: 10px;
}
  /*different for mobile and wide*/
  .siteDetailMainContent {
    margin-bottom: 21px;

  }
  .siteDetail h2 {
    text-align: center;
    color: #f87022;
    font-size: 20px;
    font-weight: 300;
    padding-top: 31px;
    padding-bottom: 16px;
  }
    .siteDetail h2 i {
      display: inline-block;
      vertical-align: top;
      width: 46px;
      height: 45px;
      background-position: -280px -156px;
    }
    .siteDetail h2 span {
      padding-top: 22px;
      display: block;
    }
  .siteDetail h3 {
    /*border: solid #ccc;*/
    border-width: 1px 0;
    padding: 16px 16px;
    font-size: 15px;
    font-weight: 300;
    color: #f87022;
    cursor: pointer;
  }
    .siteDetail h3 i {
      float: right;
      width: 14px;
      height: 9px;
      background-position: -339px -155px;
    }
    .siteDetail .collapsed i {
      background-position: -339px -175px;
    }
  .siteDetail .evolHouse .collapsed {
    border-bottom: 0;
  }
  .evolHouse {}
  .houseSetting {
    display: block;
    padding-top: 4px;
  }
    .houseSetting .row {
      padding: 4px 14px;
    }
      .houseSetting .row .inputWrap {
        display: block;
        border: 1px solid #ccc;
        border-radius: 2px;
      }
        .houseSetting .row .inputWrap input {
          padding: 11px 12px;
          font-size: 15px;
          border: 0;
          outline: 0;
          width: 80%;
          background: transparent;
        }
      .houseSetting .row select {
        width: 100%;
      }
    .houseSetting .slideRow {
      padding-top: 10px;
      margin-right: 4px;
    }
      .houseSetting .slideRow i {
        float: left;
        width: 37px;
        height: 36px;
        background-position: -85px -280px;
      }
      .houseSetting .solarPanelsRow i { background-position: -85px -335px; }
      .houseSetting .panelOrientationRow i { background-position: -85px -385px; }
      .houseSetting .shadeRow i { background-position: -85px -443px; }
      .houseSetting .slideRow .tuner {
        /* margin-left: 53px; */
        /* padding-bottom: 14px; */
        font-size: 15px;
        font-weight: 300;
        color: #333;
      }
        .houseSetting .slideRow .tuner .val {
          float: right;
          color: #f87022;
        }
      .houseSetting .slideRow .rangeCon {
        height: 20px;
        margin-left: 55px;
      }
  .houseEffectCon {
    height: 290px;
    border-top: 1px solid #ccc;
    overflow: hidden;
    position: relative;
  }
  .houseEffect {
    height: 290px;
    /* width: 350px;
    margin: 0 auto; */
    position: relative;
    overflow: hidden;
  }
    .houseEffectCon .logo,
    .houseEffect .systemSize,
    .houseEffectCon .shadeInfo {
      position: absolute;
    }
    .houseEffectCon .logo {
      height: 28px;
      width: 116px;
      background: url(../i/icon-sprites.png) no-repeat -312px -297px;
      background-size: 436px 572px;
      top: 0px;
      right: 0px;
      z-index: 1;
    }
    .houseEffect .systemSize {
      width: 64px;
      height: 64px;
      background: #2296f8;
      top: 0px;
      left: 0px;
      border-radius: 37px;
      color: #fff;
      z-index: 1;
    }
      .houseEffect .systemSize strong {
        font-size: 18px;
        display: block;
        padding-top: 15px;
        padding-bottom: 4px;
        text-align: center;
      }
      .houseEffect .systemSize span {
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        display: block;
      }
    .houseEffectCon .shadeInfo {
      background: #f87022;
      /* left: 0;*/
      bottom: 0;
      font-size: 12px;
      font-weight: normal;
      /*right: 0;
      text-align: center;
      line-height: 54px;
      height: 54px;*/
      color: #fff;
      z-index: 2;
      /* padding: 0 16px;  */

      width: 70%;
      left: 30%;
      margin-left: -60px;
      right: auto;
      border-radius: 16px;
      text-align: center;
      line-height: 30px;
    }


/*.detailedResults {}*/

.detailedResults {
    border: 1px solid #CCC;
    width: 960px;
    margin: 0px auto 21px;
    }

.detailedResults h3 {
  /*      border-top: 0;
  */      font-size: 18px;
/*        border-style: solid;
        border-color: #CCC;*/
/*        border-top: 0px solid #CCC;*/
      }



  .houseSetting {
    display: block;
    padding-top: 4px;
  }
    .houseSetting .row {
      padding: 4px 14px;
    }
      .houseSetting .row .inputWrap {
        display: block;
        border: 1px solid #ccc;
        border-radius: 2px;
      }
        .houseSetting .row .inputWrap input {
          padding: 11px 12px;
          font-size: 15px;
          border: 0;
          outline: 0;
          width: 80%;
          background: transparent;
        }
      .houseSetting .row select {
        width: 100%;
      }
    .houseSetting .slideRow {
      padding-top: 10px;
      margin-right: 4px;
    }
      .houseSetting .slideRow i {
        float: left;
        width: 37px;
        height: 36px;
        /*background-position: -85px -280px;*/
      }
     




/*3D scene*/
.effectStage {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
  perspective-origin: -70% -240px;
  -webkit-perspective-origin: -70% -240px;
  -moz-perspective-origin: -70% -240px;
  /* height: 290px; */
  height: 408px; /* not for mobile */
  width: 700px;
  position: relative;
  overflow: hidden;
}

  .effectStage span {
    display: block;
  }
  .effectStage div,
  .effectStage figure,
  .effectStage span {
    position: absolute;
    top: 0;
    left: 0;
  }  
  /*compass*/
    .houseEffect .compass {
      background-image: url(../i/compass.png);
      background-size: 336px 336px;
      width: 336px;
      height: 336px;
      -webkit-transition: 1s ease-in-out;
      -moz-transition: 1s ease-in-out;
      -o-transition: 1s ease-in-out;
      transition: 1s ease-in-out;
      top: -45px;
      left: 14px;
      position: absolute;
    }

    .compassN{
        transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(135deg);
        -webkit-transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(135deg);
        -moz-transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(135deg);
    }

    .compassNE{
        transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(90deg);
        -webkit-transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(90deg);
        -moz-transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(90deg);
    }

    .compassE{
      transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(45deg);
      -webkit-transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(45deg);
      -moz-transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(45deg);
    }


    .compassSE{
      transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(0deg);
      -webkit-transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(0deg);
      -moz-transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(0deg);
    }


    .compassS{
      transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(-45deg);
      -webkit-transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(-45deg);
      -moz-transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(-45deg);
    }


    .compassSW{
      transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(-90deg);
      -webkit-transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(-90deg);
      -moz-transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(-90deg);
    }


    .compassW{
      transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(-135deg);
      -webkit-transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(-135deg);
      -moz-transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(-135deg);
    }


    .compassNW{
      transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(-180deg);
      -webkit-transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(-180deg);
      -moz-transform: rotateY(50deg) rotateX(-65deg) rotateY(-24deg) rotateZ(-180deg);
    }

  /*the shades*/
  .effectStage .building {
    background: url(../i/rep-building.png) no-repeat 0 0;
    background-size: 160px 215px;
    width: 160px;
    height: 215px;
    transform: translateX(-37px) translateY(21px);
    -webkit-transform: translateX(-37px) translateY(21px);
    -moz-transform: translateX(-37px) translateY(21px);
  }
  .effectStage .treeModel {
    background: url(../i/rep-tree-small.png) no-repeat 0 0;
    background-size: 54px 103px;
    width: 54px;
    height: 103px;
    transform: translateX(47px) translateY(55px);
    -webkit-transform: translateX(47px) translateY(55px);
    -moz-transform: translateX(47px) translateY(55px);
  }
  .effectStage .treeModel.secondTree {
    background: url(../i/rep-tree-large.png) no-repeat 0 0;
    background-size: 89px 127px;
    width: 89px;
    height: 127px;
    transform: translateX(88px) translateY(67px);
    -webkit-transform: translateX(88px) translateY(67px);
    -moz-transform: translateX(88px) translateY(67px);
  }
    .effectStage .shadeModel {
      width: 80px;
      height: 95px;
      background: url(../i/shade-little.png) no-repeat 0 0;
      background-size: 25px 64px;
      transform: translateX(111px) translateY(60px);
      -webkit-transform: translateX(111px) translateY(60px);
      -moz-transform: translateX(111px) translateY(60px);
      display: block;
    }
    .effectStage .shadeModel.little {
      display: block;
    }
    .effectStage .shadeModel.med {
      display: block;
      background: url(../i/shade-med.png) no-repeat 0 0;
      background-size: 80px 95px;
    }
    .effectStage .shadeModel.lots {
      display: block;
      background: url(../i/shade-lots.png) no-repeat 0 0;
      background-size: 75px 127px;
      height: 127px;
      transform: translateX(118px) translateY(30px);
      -webkit-transform: translateX(118px) translateY(30px);
      -moz-transform: translateX(118px) translateY(30px);
    }
  /*the house begins here*/
  .effectStage .house {
    width: 148px;
    height: 146px;
    background: url(../i/house-flat.png) no-repeat center 0;
    background-size: 131px 146px;
    transform: translateX(107px) translateY(12px);
    -webkit-transform: translateX(107px) translateY(12px);
    -moz-transform: translateX(107px) translateY(12px);
  }
  .effectStage .house.medSlope {
    background: url(../i/house-med.png) no-repeat 0 18px;
    background-size: 151px 126px;
  }
  .effectStage .house.highSlope {
    background: url(../i/house-high.png) no-repeat 0 0;
    background-size: 148px 144px;
  }
  .effectStage .solarPanels {
    width: 112px;
    height: 85px;
    transform: translateX(107px) translateY(32px);
    -webkit-transform: translateX(107px) translateY(32px);
    -moz-transform: translateX(107px) translateY(32px);
  }
  .effectStage .solarPanels.highS {
    transform: translateX(110px) translateY(17px);
    -webkit-transform: translateX(110px) translateY(17px);
    -moz-transform: translateX(110px) translateY(17px);
  }
  .effectStage .solarPanels.noS {
      width: 129px;
      height: 75px;
      transform: translateX(117px) translateY(13px);
      -webkit-transform: translateX(117px) translateY(13px);
      -moz-transform: translateX(117px) translateY(13px);
  }
    .effectStage .solarPanels .rw {
      background: url(../i/med-slope-bar.png) no-repeat 3px 3px;
      background-size: 65px 37px;
      width: 98px;
      height: 42px;
      transform: translateX(30px) translateY(4px);
      -webkit-transform: translateX(30px) translateY(4px);
      -moz-transform: translateX(30px) translateY(4px);
    }
    .effectStage .solarPanels.highS .rw {
      background-image: url(../i/high-slope-bar.png);
      background-size: 70px 42px;
      transform: translateX(29px) translateY(5px);
      -webkit-transform: translateX(29px) translateY(5px);
      -moz-transform: translateX(29px) translateY(5px);
    }
    .effectStage .solarPanels.noS .rw {
      background-image: url(../i/flat-slope-bar.png);
      background-size: 62px 35px;
      transform: translateX(53px) translateY(1px);
      -webkit-transform: translateX(53px) translateY(1px);
      -moz-transform: translateX(53px) translateY(1px);
    }
    .effectStage .solarPanels .rw:nth-of-type(2) {
      transform: translateX(22px) translateY(15px);
      -webkit-transform: translateX(22px) translateY(15px);
      -moz-transform: translateX(22px) translateY(15px);
    }
    .effectStage .solarPanels.highS .rw:nth-of-type(2) {
      transform: translateX(20px) translateY(20px);
      -webkit-transform: translateX(20px) translateY(20px);
      -moz-transform: translateX(20px) translateY(20px);
    }
    .effectStage .solarPanels.noS .rw:nth-of-type(2) {
      transform: translateX(36px) translateY(9px);
      -webkit-transform: translateX(36px) translateY(9px);
      -moz-transform: translateX(36px) translateY(9px);
    }
    .effectStage .solarPanels .rw:nth-of-type(3) {
        transform: translateX(14px) translateY(26px);
        -webkit-transform: translateX(14px) translateY(26px);
        -moz-transform: translateX(14px) translateY(26px);
    }
    .effectStage .solarPanels.highS .rw:nth-of-type(3) {
      transform: translateX(12px) translateY(34px);
      -webkit-transform: translateX(12px) translateY(34px);
      -moz-transform: translateX(12px) translateY(34px);
    }
    .effectStage .solarPanels.noS .rw:nth-of-type(3) {
      transform: translateX(22px) translateY(19px);
      -webkit-transform: translateX(22px) translateY(19px);
      -moz-transform: translateX(22px) translateY(19px);
    }
    .effectStage .solarPanels .rw:nth-of-type(4) {
      transform: translateX(6px) translateY(37px);
      -webkit-transform: translateX(6px) translateY(37px);
      -moz-transform: translateX(6px) translateY(37px);
    }
    .effectStage .solarPanels.highS .rw:nth-of-type(4) {
      transform: translateX(4px) translateY(48px);
      -webkit-transform: translateX(4px) translateY(48px);
      -moz-transform: translateX(4px) translateY(48px);
    }
    .effectStage .solarPanels.noS .rw:nth-of-type(4) {
      transform: translateX(7px) translateY(28px);
      -webkit-transform: translateX(7px) translateY(28px);
      -moz-transform: translateX(7px) translateY(28px);
    }
      .effectStage .solarPanels .rw i {
        display: inline-block;
        width: 23px;
        height: 21px;
        background: url(../i/panel-single-med.png) no-repeat 0 0;
        background-size: 23px 21px;
      }
      .effectStage .solarPanels.highS .rw i {
        background-image: url(../i/panel-single-high.png);
      }
      .effectStage .solarPanels.noS .rw i {
        background-image: url(../i/panel-single-flat.png);
        width: 20px;
        height: 19px;
        background-size: 20px 19px;
      }
      .effectStage .solarPanels .rw i:nth-of-type(1) {
        transform: translateX(0px) translateY(-5px);
        -webkit-transform: translateX(0px) translateY(-5px);
        -moz-transform: translateX(0px) translateY(-5px);
      }
      .effectStage .solarPanels.highS .rw i:nth-of-type(1) {
        transform: translateX(-1px) translateY(-2px);
        -webkit-transform: translateX(-1px) translateY(-2px);
        -moz-transform: translateX(-1px) translateY(-2px);
      }
      .effectStage .solarPanels.noS .rw i:nth-of-type(1) {
        transform: translateX(-1px) translateY(-2px);
        -webkit-transform: translateX(-1px) translateY(-2px);
        -moz-transform: translateX(-1px) translateY(-2px);
      }
      .effectStage .solarPanels .rw i:nth-of-type(2) {
        transform: translateX(-7px) translateY(5px);
        -webkit-transform: translateX(-7px) translateY(5px);
        -moz-transform: translateX(-7px) translateY(5px);
      }
      .effectStage .solarPanels.highS .rw i:nth-of-type(2) {
        transform: translateX(-7px) translateY(7px);
        -webkit-transform: translateX(-7px) translateY(7px);
        -moz-transform: translateX(-7px) translateY(7px);
      }
      .effectStage .solarPanels.noS .rw i:nth-of-type(2) {
        transform: translateX(-5px) translateY(5px);
        -webkit-transform: translateX(-5px) translateY(5px);
        -moz-transform: translateX(-5px) translateY(5px);
      }
      .effectStage .solarPanels .rw i:nth-of-type(3) {
        transform: translateX(-13px) translateY(14px);
        -webkit-transform: translateX(-13px) translateY(14px);
        -moz-transform: translateX(-13px) translateY(14px);
      }
      .effectStage .solarPanels.highS .rw i:nth-of-type(3) {
        transform: translateX(-12px) translateY(17px);
        -webkit-transform: translateX(-12px) translateY(17px);
        -moz-transform: translateX(-12px) translateY(17px);
      }
      .effectStage .solarPanels.noS .rw i:nth-of-type(3) {
        transform: translateX(-10px) translateY(14px);
        -webkit-transform: translateX(-10px) translateY(14px);
        -moz-transform: translateX(-10px) translateY(14px);
      }
      .effectStage .solarPanels .rw i:nth-of-type(4) {
        transform: translateX(-20px) translateY(24px);
        -webkit-transform: translateX(-20px) translateY(24px);
        -moz-transform: translateX(-20px) translateY(24px);
      }
      .effectStage .solarPanels.highS .rw i:nth-of-type(4) {
        transform: translateX(-18px) translateY(26px);
        -webkit-transform: translateX(-18px) translateY(26px);
        -moz-transform: translateX(-18px) translateY(26px);
      }
      .effectStage .solarPanels.noS .rw i:nth-of-type(4) {
        transform: translateX(-15px) translateY(23px);
        -webkit-transform: translateX(-15px) translateY(23px);
        -moz-transform: translateX(-15px) translateY(23px);
      }

      
/*site detail value item*/
.siteDetail .item{}


/*tabbed content*/
label.btn input[type="file"] {
    position: fixed;
    top: -1000px;
}


.tabbed{}
  .tabHead {
    height: 50px;
  }
    .tabHead ul{
      height: 50px;
      border-bottom: 1px solid #ccc;
      overflow: hidden;
    }
    .tabHead ul li {
      height: 50px;
      text-align: center;
      width: 33%;
      float: left;
      box-shadow: -1px 0px 0px 0px #ccc;
      background: #fff;
    }
    .tabHead ul li:last-child {
      width: 34%;
    }
    .tabHead ul .active {
      background: #f87022;
    }
      .tabHead ul li a {
        display: block;
        font-size: 16px;
        line-height: 50px;
        color: #666;
      }
      .tabHead ul .active a {
        color: #fff;
      }
      .tabHead ul li .long {
        line-height: inherit;
        padding-top: 10px;
      }
      .tabHead ul li .wide {
        display: none;
      }
      .tabHead ul li .narrow {
        display: block;
      }
  .tabContent {
    border-bottom: 1px solid #ccc;
    padding-bottom: 7px;
    min-height: 627px;
    margin-bottom: 10px;
  }
    .totalRow {
      padding-top: 40px;
      text-align: center;
      /* background: #2296f8; */
      color: #F87022;
      font-size: 15px;
      margin: 8px 6px 0 8px;
    }
      .totalRow span {
        display: block;
        padding-bottom: 11px;
      }
      .totalRow strong {
        font-weight: 600;
        display: block;
        padding-bottom: 23px;
      }
    .dwellersRow,
    .sizeRow {
      padding: 14px 7px 0 7px;
      background: #f8f8f8;
      min-height: 108px;
      margin: 5px 6px 0 6px;
    }
      .dwellersRow .lbl,
      .sizeRow .lbl {
        float: left;
        width: 45%;
        display: block;
        line-height: 30px;
        color: #666;
      }
      .dwellersRow .val,
      .sizeRow .val {
        float: right;
        /* width: 50%; */
        text-align: right;
        line-height: 26px;
      }
      .val .math {
        display: inline-block;
        vertical-align: top;
        width: 24px;
        height: 24px;
        margin: 0 6px;
        color: #333;
        margin-top: 2px;
        border-radius: 50%;
        background-color: #ccc;
      }
      .val .math.sub { background-position: -364px -141px; }
      .val .math.add { background-position: -409px -142px; }
      .val .math.gudtogo { background-color: #38b624; }
      .val .math.sub.gudtogo { background-color: #f87022; }

   
      .val .count {
        display: inline-block;
        vertical-align: top;
        font-size: 26px;
        min-width: 44px;
        text-align: center;
      }
      .sizeRow .val .count {
        font-size: 12px;
      }
        .val .count .unit {
          margin-left: 6px;
        }

      .val .count2 {
        display: inline-block;
        vertical-align: top;
        font-size: 26px;
        min-width: 44px;
        text-align: center;
      }
      .sizeRow .val .count2 {
        font-size: 12px;
      }
        .val .count2 .unit {
          margin-left: 6px;
        }

         .val .count500 {
        display: inline-block;
        vertical-align: top;
        font-size: 26px;
        min-width: 44px;
        text-align: center;
      }
      .sizeRow .val .count500 {
        font-size: 12px;
      }
        .val .count500 .unit {
          margin-left: 6px;
        }

         .val .count1 {
        display: inline-block;
        vertical-align: top;
        font-size: 26px;
        min-width: 44px;
        text-align: center;
      }
      .sizeRow .val .count1 {
        font-size: 12px;
      }
        .val .count1 .unit {
          margin-left: 6px;
        }

    .tabContent h4 {
      line-height: 30px;
      font-size: 15px;
      font-weight: 600;
      padding-top: 20px;
      padding-bottom: 8px;
      margin-left: 15px;
    }
      .tabContent h4 i {
        margin-right: 8px;
        width: 30px;
        height: 30px;
        background-position: -281px -213px;
        display: inline-block;
        vertical-align: top;
      }
    .tabContent ol {
      margin-left: 50px;
    }
      .tabContent ol li {
        line-height: 20px;
        font-size: 13px;
        color: #333;
        padding-bottom: 4px;
      }
      .tabContent ol li > span{
        float: left;
      }
      .tabContent ol li > p {
        margin-left: 18px;
        display: block;
      }
    .tabContent .url {
      background: #2296f8;
      margin: 15px 8px;
      word-wrap: break-word;
      padding: 13px 22px;
      color: #fff;
      min-height: 60px;
      font-size: 13px;
      line-height: 18px;
    }
    .tabContent .uploadData {
      border-top: 1px solid #ccc;
      margin-top: 8px;
    }
      .tabContent .uploadData .uploadRow,
      .tabContent .inputRow {
        height: 45px;
        margin: 12px 27px 0 27px;
      }
      .tabContent .uploadData .inputWrap,
      .tabContent .inputWrap {
        margin-right: 110px;
        border: 1px solid #ccc;
        height: 43px;
      }
        .tabContent .uploadData .inputWrap input,
        .tabContent .inputWrap input {
          border: 0;
          outline: 0;
          padding: 12px;
          width: 90%;
          font-size: 15px;
          background: transparent;
        }
        .tabContent .uploadData .btn,
        .tabContent .inputRow .btn {
          float: right;
          width: 90px;
        }
    .tabContent .checkNote {
      margin: 13px 8px;
      background: #f8f8f8;
      padding: 16px 20px;
      line-height: 15px;
      font-size: 13px;
      color: #333;
    }

/*sub tabs*/
.subTab {
  border-top: 1px solid #ccc;
  margin-top: 6px;
  padding-top: 4px;
  margin-bottom: 10px;
}
  .subTab .tabSide {
    display: block;
    border-bottom: 1px solid #ccc;
    height: 44px;
  }
    .subTab .tabSide ul {
      height: 100%;
    }
      .subTab .tabSide li {
        float: left;
        width: 16.6%;
        height: 100%;
      }
      .subTab .tabSide li:last-child {
        width: 17%;
      }
        .subTab .tabSide li a {
          height: 100%;
          display: block;
        }
        .subTab .tabSide .active a,
        .subTab .tabSide li a:hover {
          box-shadow: inset 0 -3px 0 #f87022;
        }
        .subTab .tabSide li i {
          width: 36px;
          height: 36px;
          margin: 0 auto;
          display: block;
          background-position: -133px -305px;
          margin-top: 3px;
        }
        .subTab .tabSide .living i { background-position: -175px -305px; }
        .subTab .tabSide .kitchen i { background-position: -218px -305px; }
        .subTab .tabSide .bath i { background-position: -254px -305px; }
        .subTab .tabSide .office i { background-position: -289px -305px; }
        .subTab .tabSide .garage i { background-position: -327px -305px; }
        .subTab .tabSide li span {
          display: none;
        }


  .subTabContent {
    padding-top: 7px;
  }
    .subTabContent .item {
      background: #f8f8f8;
      margin: 0 8px 3px 8px;
      padding: 12px 6px;
      height: 55px;
    }
      .subTabContent .item i {
        float: left;
        width: 36px;
        margin-right: 10px;
        height: 28px;
      }
      .subTabContent .item > span {
        float: left;
        margin-top: 8px;
      }
      .subTabContent .item .val {
        float: right;
      }
      /*icons*/
      .subTabContent .item.centralAC i { background-position: -131px -352px; }
      .subTabContent .item.evaporationCooler i { background-position: -167px -352px; }
      .subTabContent .item.unitAC i { background-position: -200px -352px; }
      .subTabContent .item.unitHeater i { background-position: -238px -352px; }
      .subTabContent .item.waterHeater i { background-position: -278px -352px; }
      .subTabContent .item.tv i { background-position: -131px -388px; }
      .subTabContent .item.stereo i { background-position: -167px -388px; }
      .subTabContent .item.dvd i { background-position: -202px -394px; }
      .subTabContent .item.lights i { background-position: -238px -392px; }
      .subTabContent .item.oven i { background-position: -278px -392px; }
      .subTabContent .item.microwave i { background-position: -131px -428px; }
      .subTabContent .item.refrigerator i { background-position: -167px -428px; }
      .subTabContent .item.toaster i { background-position: -200px -428px; }
      .subTabContent .item.dishwasher i { background-position: -238px -428px; }
      .subTabContent .item.coffeeMaker i { background-position: -278px -428px; }
      .subTabContent .item.blender i { background-position: -131px -469px; }
      .subTabContent .item.waterBoiler i { background-position: -167px -469px; }
      .subTabContent .item.hairDryer i { background-position: -200px -469px; }
      .subTabContent .item.whirlpoolTub i { background-position: -238px -469px; }
      .subTabContent .item.handDryer i { background-position: -278px -469px; }
      .subTabContent .item.pc i { background-position: -131px -515px; }
      .subTabContent .item.monitor i { background-position: -167px -515px; }
      .subTabContent .item.laptop i { background-position: -200px -515px; }
      .subTabContent .item.cellPhones i { background-position: -238px -513px; }
      .subTabContent .item.printer i { background-position: -278px -513px; }
      .subTabContent .item.washingMachine i { background-position: -131px -553px; }
      .subTabContent .item.dryer i { background-position: -167px -553px; }
      .subTabContent .item.freezer i { background-position: -200px -553px; }
      .subTabContent .item.iron i { background-position: -238px -553px; }
      .subTabContent .item.electricVehicle i { background-position: -278px -553px; }

  .siteDetail .actionRow {
    padding-bottom: 49px;
    text-align: center;
  }
    .siteDetail .btn {
      width: 138px;
      margin-right: 10px;
    }

/*generating site page*/
.generatingSite {}
  .generatingSite h2 {
    padding-bottom: 28px;
  }
  .generatingSite h2 i {
    background-position: -328px -206px;
  }
  .progressState {}
    .progressState p {
      font-size: 18px;
      line-height: 24px;
      text-align: center;
      padding-bottom: 23px;
      color: #666;
    }
      .progressState p strong {
        color: #f87022;
      }
    .progressBar {
      max-width: 660px;
      margin: 0 auto;
    }
      .progressBar .barBase {
        height: 40px;
        border: 1px solid #ccc;
        border-radius: 2px;
        position: relative;
      }
      .progressBar .achieved {
        position: absolute;
        left: -1px;
        top: -1px;
        bottom: -1px;
        background: #f87022;
        width: 0%;
        border-radius: 2px;
      }
      .progressBar .achieved.full {
        right: -1px;
      }
      .progressBar p {
        text-align: center;
        padding-top: 13px;
        font-size: 16px;
        color: #999;
      }

  .generatingSite .playerArea {
    max-width: 658px;
    margin: 35px auto;
    border: 1px solid #ccc;
    margin-bottom: 28px;
    height: 244px;
    position: relative;
    overflow: hidden;
  }
    .generatingSite .playerArea .play {
      width: 66px;
      height: 65px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -32px;
      margin-top: -32px;
      background-position: -193px -150px;
    }
    .generatingSite .playerArea img {
      margin: -2px;
    }
    .generatingSite .actionRow {
      max-width: 660px;
      margin: 0 auto;
    }
      .generatingSite .actionRow .btn {
        display: block;
      }
/*add site page*/
.addSite {
  max-width: 660px;
  margin: 0 auto;
}
.addSite h2 i {
  background-position: -387px -206px;
}
  .addSite > p {
    font-size: 15px;
    color: #666;
    line-height: 24px;
    text-align: center;
    margin: 0 8px;
  }
    .addSite > p strong {
      color: #f87022;
      font-weight: 600;
    }
  .addSite .mapSearchCon {
    margin: 15px auto 17px auto;
    max-width: 660px;
  }
  .addSite .mapSearch {
    border: 1px solid #ccc;
    margin: 0 8px;
    border-radius: 2px;
  }
    .addSite .mapSearch input {
      border: 0;
      outline: 0;
      padding: 12px;
      font-size: 14px;
      width: 85%;
    }
  .mapArea {
    height: 233px;
    border: solid #ccc;
    border-width: 1px 0;
    max-width: 660px;
    margin: 0 auto;
  }
  .siteInfo {
    font-size: 15px;
    color: #666;
    padding: 15px 0;
    text-align: center;
  }
  .addSite .actionRow {
    text-align: center;
    margin: 0 15px;
    margin-bottom: 34px;
  }
    .addSite .actionRow .btn {
      display: block;
      max-width: 320px;
      margin: 0 auto;
    }

/*dashboard page*/
.dashboard h2 i {
  background-position: -391px -271px;
  height: 38px;
}
.dashboard h2 span {
  padding-top: 20px;
}
/*dashboard filter area*/
.filterRow {
  border: solid #ccc;
  border-width: 1px 0;
}
.filterRow .citySel {
  display: block;
}
  .filterRow .select2-container--default .select2-selection--single {
    border-width: 0;
  }
  .filterRow .citySel .select2-container--default .select2-selection--single {
    border-bottom-width: 1px;
  }
  .filterRow .whenSel .select2-container--default .select2-selection--single {
    border-top-width: 1px;
  }
.filterRow .dateRange {
  height: 85px;
  margin: 0 15px;
}
  .filterRow .dateRange .fromDate,
  .filterRow .dateRange .toDate {
    width: 50%;
    float: left;
  }
    .filterRow .dateRange label {
      font-size: 12px;
      color: #333;
      margin-bottom: 10px;
      display: block;
      padding-top: 9px;
    }
    .filterRow .dateRange .dateWrap {
      border: 1px solid #ccc;
      height: 40px;
      position: relative;
    }
      .filterRow .dateRange .dateWrap a {
        position: absolute;
        display: none;
        width: 23px;
        height: 23px;
        background-position: -342px -270px;
        right: 9px;
        top: 8px;
      }
      .filterRow .dateRange .dateWrap input {
        border: 0;
        outline: 0;
        padding: 10px;
        font-size: 15px;
        width: 80%;
        background: transparent;
      }
    .filterRow .toDate label {
      margin-left: 3px;
    }
    .filterRow .toDate .dateWrap {
      margin-left: 3px;
    }
    .filterRow .fromDate .dateWrap {
      margin-right: 3px;
    }

/*dashboard highlighted key items*/
.dashboardItems {
  margin: 0 10px;
  min-height: 129px;
  margin-top: 18px;
}
  .dashboardItems ul {
    max-width: 660px;
    margin: 0 auto;
  }
    .dashboardItems ul li {
      display: block;
      float: left;
      width: 25%;
      text-align: center;
    }
      .dashboardItems ul li strong {
        display: block;
        font-size: 14px;
        color: #333;
        height: 22px;
      }
      .dashboardItems ul li i,
      .dashboardItems ul li .knobHolder {
        height: 60px;
        width: 60px;
        margin: 10px auto;
        display: block;
      }
      .dashboardItems ul li .knobHolder {
        background-position: -319px -350px;
      }
      #knobDesktop {
        display: none;
      }
      #knobMobile {
        display: block;
      }
      .dashboardItems ul .earning i { background-position: -389px -351px; }
      .dashboardItems ul .production i { background-position: -318px -421px; }
      .dashboardItems ul .consumption i { background-position: -389px -421px; }

      .dashboardItems ul li .val {
        display: block;
      }
      .dashboardItems ul .sunshineIndex .val { color: #30cd00; }
      .dashboardItems ul .earning .val { color: #30cd00; }
      .dashboardItems ul .production .val { color: #f98d4e; }
      .dashboardItems ul .consumption .val { color: #2296f8; }
/* .dashboard .hr {f98d4e
  border-top: 1px solid #ccc;
  height: 1px;
} */
.chartArea {
  margin: 12px 15px;
  /*height: 315px;*/
  overflow: hidden;
  position: relative;
}
  .chartArea p {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 24px;
    color: #999;
    height: 38px;
  }
  .chartContent {
/*    height: 310px;*/
  }
/*prediction carousel*/
.predictionCarousel {
  /* display: block; */
}
  .predictionCarousel li {
    float: left;
    /* width: 33%; */
    margin-left: 20px;
    text-align: center;
  }
    .predictionCarousel div i {
      display: block;
      width: 140px;
      height: 140px;
      margin: 43px auto 18px auto;
      /*background: url(../i/charging-icons.png) no-repeat 0 0;*/
      background: url(../i/discover-icons.png) no-repeat 0 0;
    }
    .predictionCarousel .powerDishwasher i { background-position: -160px 0; }
    .predictionCarousel .powerAC i { background-position: -329px 0; }
    .predictionCarousel div p {
      font-size: 18px;
      max-width: 225px;
      margin: 0 auto;
      text-align: center;
      line-height: 28px;
      padding-bottom: 15px;
    }
      .predictionCarousel div p strong {
        color: #f87022;
        font-weight: 600;
      }
  .predictionCarousel .bx-pager {
    text-align: center;
  }
    .predictionCarousel .bx-pager-item {
      display: inline-block;
      vertical-align: top;
      overflow: hidden;
    }
      .predictionCarousel .bx-pager-item a {
        display: block;
        width: 8px;
        height: 8px;
        background: #ccc;
        text-indent: 10000px;
        overflow: hidden;
        border-radius: 4px;
        margin: 0 3px;
      }
      .predictionCarousel .bx-pager-item .bx-pager-link.active {
        background: #2296f8;
      }

.predictionItems {
  display: none;
}
.dashboard .actionRow {
  margin-top: 15px;
  margin-bottom: 36px;
  text-align: center;
}
  .dashboard .actionRow .btn {
    min-width: 145px;
  }
/*datepicker style*/
.ui-datepicker {
  background: #fff;
  border: 1px solid #ccc;
}
  .ui-datepicker td a {
    color: #f87022;
  }
  
/* Gauge chart Page */
.inline{
    display: inline-block;
    margin-right: -4px;
    vertical-align: top;
}

.middle{
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

.absolutepos{
    position: absolute;
}

.content{
    height: -moz-calc(100% - 359px);
    height: -webkit-calc(100% - 359px);
    height: calc(100% - 359px);
    position: relative;
    min-height: 260px;
}


.gaugeContainer{
    width: 507px;
    height: 170px;
    border-style: solid;
    border-width: 2px;
    border-color: #a2a2a2;
    border-radius: 5px;
    /* font-family: "Open Sans", Arial; */
    font-family: "Karla", sans-serif;
}

.gaugeContainer .textContainer{
    padding: 50px 10px 50px 35px;
    font-size: 18px;
    color: #bfc0c0;
    text-transform: capitalize;
    width: 340px;
}

.gaugeContainer .textContainer .textRow{
    height: 22px;
}

.superscript{
    vertical-align: super;
    font-size: 10px;
}

.gaugeContainer .textContainer .text{
    width: 225px;
}

.gaugeContainer .textContainer .value{
    color: #82c562;
}

.gaugeContainer .chartContainer{
    position: relative;
    height: 100%;
}

.gaugeContainer .chartContainer .gaugeChart{
    /* background-image: url('../i/gauge-retina.jpg'); */
    height: 135px;
    width: 135px;
    background-size: cover;
    margin: 17px auto 0px auto;
}

.gaugeContainer .chartContainer .gaugeChart .counter{
    color: white;
    font-size: 18px;
    top: 80px;
    left: 35px;
    width: 65px;
    text-align: center;
}

.gaugeContainer .chartContainer .gaugeChart .unit{
    font-size: 10px;
    top: 111px;
    left: 42px;
    color: #9f9f9f;
}

.gaugePointer{
    background-image: url('../i/pointer-retina.png');
    height: 64px;
    width: 58px;
    background-size: contain;
    z-index: 10;
    top: 36px;
    left: 39px;
    -webkit-transform-origin: 29px 27px;
    -webkit-transform: rotate(-90deg);
    transform-origin: 29px 27px;
    transform: rotate(-90deg);
}

.transition {
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
/* End Gauge chart Page */

/*device media queries
*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  #header .logo {
    width: 141px;
    height: 28px;
    background-size: 336px 436px; /*0.75*of sprite size*/
    background-position: -186px -8px;
  }
  .dashboardItems ul li strong {
        font-size: 9px;
    }
    
    .dashboardItems .tool-icon {
        height: 10px;
        width: 10px;
    }
}
@media (min-width : 480px) and (max-width : 960px) {
  #mainNav ul {
    text-align: center;
  }
    #mainNav ul li,
    #mainNav .track {
      float: none;
    }
    #mainNav li a {
      margin-top: 18px;
      height: 23px;
      margin: 18px 25px 0 25px;
    }
  .houseEffect {
    width: 400px;
    margin: 0 auto;
  }
    .houseEffect .compass {
      left: 54px;
    }
    .houseEffect .effectStage > div {
      left: 40px;
    }
  .tabHead ul li .long {
    line-height: 57px;
    padding-top: 0;
  }
}
/*specific for devices with greater width than 960px*/
@media (min-width: 960px) {
  /*some reusable styles*/
  .container {
    /* width: 1100px; */
    margin: 0 auto;
  }
  .sprite {
    background-image: url(../i/icon-sprites.png);
    /* background-image: url(../i/); */
    background-size: auto;
  }
  h2,
  .siteDetail h2 {
    font-size: 24px;
    padding-top: 62px;
    padding-bottom: 20px;
  }
  .btn {
    padding: 18px 6px;
  }
  #header .logo {
    background-position: -15px -117px;
  }
  #mainNav ul {
    text-align: center;
  }
    #mainNav ul li,
    #mainNav .track {
      float: none;
    }
      #mainNav li a {
        margin-top: 18px;
        height: 23px;
        margin: 18px 25px 0 25px;
      }
      #mainNav .discover a {
        width: 158px;
        background-position: -14px -2px;
      }
      #mainNav.siteNav .discover a { background-position: -14px -83px; }
      #mainNav .go a {
        width: 46px;
        background-position: -188px -2px;
      }
      #mainNav.siteNav .go a { background-position: -188px -83px; }
      #mainNav .track a {
        width: 107px;
        background-position: -252px -2px;
      }
      #mainNav.siteNav .track a { background-position: -252px -83px; }
      #mainNav .discover:hover a,
      #mainNav .discover.active a {
        background-position: -14px -42px;
      }
      #mainNav .go:hover a,
      #mainNav .go.active a {
        background-position: -188px -42px;
      }
      #mainNav .track:hover a,
      #mainNav .track.active a {
        background-position: -252px -42px;
      }
  /*showcase */
  #showCase {
    height: 452px;
  }
  #showCase .play {
    width: 78px;
    height: 78px;
    margin: 0 auto;
    background-position: -381px -5px;
    display: block;
    clear: both;
    position: relative;
    top: 156px;
  }
  #showCase .play:hover {
    background-position: -381px -94px;
  }
  #showCase p {
    padding-top: 5px;
    font-size: 24px;
  }
  #showCase .btn {
    min-width: 156px;
    margin-right: 6px;
  }
  /*quick Info*/
  #quickInfo {
    min-height: 374px;
    padding-top: 12px;
  }
    #quickInfo .info {
      float: left;
      width: 48%;
      padding-right: 2%;
      font-size: 18px;
      line-height: 30px;
    }
    #quickInfo .imgArea {
      float: right;
      width: 50%;
    }
  /*features*/
  #features {
    height: 278px;
    padding-top: 58px;
  }
    #features ul li {
      float: left;
      width: 20%;
      text-align: center;
    }
      #features ul li i {
        display: block;
        margin: 0 auto;
        float: none;
        width: 98px;
        height: 98px;
      }
      #features ul li .featureContent {
        margin-left: 0;
        text-align: center;
      }
        #features ul li .featureContent h2 {
          text-align: center;
          font-size: 18px;
          padding-top: 27px;
          padding-bottom: 5px;
        }
        #features ul li .featureContent p {
          font-size: 14px;
          line-height: 24px;
        }
      #features ul .compatible i { background-position: -6px -172px; }
      #features ul .noEquipment i { background-position: -6px -287px; }
      #features ul .free i { background-position: -6px -398px; }
      #features ul .customizable i { background-position: -6px -504px; }
      #features ul .track i { background-position: -122px -172px; }
  /*participate*/
  #participate {
    padding-top: 24px;
    border-top: 1px solid #ccc;
    height: 825px;
  }
    #participate .addSite {
      width: 414px;
      float: left;
      margin: 0 32px;
    }
      #participate .addSite .spot {
        width: 58px;
        height: 66px;
        background-position: -114px -287px;
      }
      #participate .addSite p {
        padding: 8px 40px;
        font-size: 18px;
        line-height: 30px;
      }
      #participate .addSite .playerArea .play {
        width: 78px;
        height: 78px;
        background-position: -245px -117px;
        margin-top: -39px;
        margin-left: -39px;
      }
      #participate .addSite .playerArea .play:hover {
        background-position: -245px -207px;
      }
    #participate .newAccount {
      float: right;
      width: 476px;
    }
      #participate .newAccount .spot {
        width: 55px;
        height: 55px;
        background-position: -123px -371px;
      }
      #participate .newAccount p {
        padding: 4px 20px;
        font-size: 18px;
        line-height: 30px;
        margin-bottom: 27px;
      }
      #participate .newAccount .row {
        max-width: 338px;
        margin: 9px auto;
        border-radius: 4px;
      }
        #participate .row input {
          border-radius: 4px;
        }

  /*addsite page*/
  .addSite h2 .sprite {
    background-position: -207px -296px;
    height: 59px;
    width: 52px;
  }
  .addSite .mapSearchCon {
    margin: 37px 0 22px 0;
  }
    .addSite .mapSearch {
      margin: 0;
    }
      .addSite .mapSearch input {
        font-size: 16px;
      }
  .mapArea {
    border-width: 1px;
  }
  .addSite p {
    font-size: 18px;
    line-height: 30px;
  }
  /*generating site page*/
  .generatingSite h2 i {
    background-position: -204px -368px;
    height: 60px;
    width: 60px;
  }
  .generatingSite .playerArea {
    height: 406px;
    margin-bottom: 86px;
  }
  .generatingSite .playerArea .play {
    width: 78px;
    height: 78px;
    background-position: -245px -117px;
    margin-top: -39px;
    margin-left: -39px;
  }
  .generatingSite .playerArea .play:hover {
      background-position: -245px -207px;
    }
  /*dashboard page*/
  .dashboard h2 {
    padding-bottom: 26px;
  }
    .dashboard h2 i {
      background-position: -124px -447px;
      height: 60px;
      width: 60px;
    }
  .dashboardMainContent {
    border: 1px solid #ccc;
    width: 960px;
    margin: 0 auto;
  }
  .filterRow {
    border-top-width: 0;
    height: 58px;
  }
    .filterRow .citySel {
      float: left;
      width: 242px;
      height: 58px;
    }
    .filterRow .dateRange {
      float: left;
      width: 469px;
      border: solid #ccc;
      border-width: 0 1px;
      height: 58px;
      margin: 0;
      padding: 7px 0;
    }
      .filterRow .dateRange label{
        float: left;
        font-size: 14px;
        line-height: 22px;
        padding-left: 13px;
      }
      .filterRow .dateRange .dateWrap {
        margin-left: 42px;
        width: 176px;
      }
      .filterRow .dateRange .fromDate .dateWrap {
        margin-left: 59px;
      }
        .filterRow .dateRange .dateWrap a {
          background-position: -279px -318px;
          display: block;
        }
        .filterRow .dateRange .dateWrap input[type=date] {
          padding: 7px;
          width: 152px;
        }
      .filterRow .citySel .select2-container--default .select2-selection--single,
      .filterRow .whenSel .select2-container--default .select2-selection--single {
        border-width: 0;
        height: 57px;
      }
        .filterRow .select2-container--default .select2-selection--single .select2-selection__rendered {
          line-height: 57px;
          padding-left: 16px;
          font-size: 18px;
        }
        .filterRow .select2-container--default .select2-selection--single .select2-selection__arrow b {
          margin-top: 4px;
        }
    .filterRow .whenSel {
      width: 246px;
      float: left;
    }
  .dashboardItems {
    min-height: 240px;
    margin-top: 48px;
  }
    .dashboardItems ul {
      max-width: 800px;
      margin: 0 auto;
    }
      .dashboardItems ul li strong {
        font-size: 18px;
        height: auto;
      }
      .dashboardItems ul li i,
      .dashboardItems ul li .knobHolder {
        height: 82px;
        width: 82px;
        margin: 20px auto;
        display: block;
      }
      .dashboardItems ul li .knobHolder {
        background-position: -335px -188px;
      }
      #knobDesktop {
        display: block;
      }
      #knobMobile {
        display: none;
      }
      .dashboardItems ul .earning i { background-position: -426px -188px; }
      .dashboardItems ul .production i { background-position: -335px -280px; }
      .dashboardItems ul .consumption i { background-position: -426px -279px; }

      .dashboardItems ul li .val {
        font-size: 36px;
      }
      .dashboard .hr{
        display: none;
      }
    .predictionCarousel {
      display: none;
    }
    .predictionItems {
      display: block;
      height: 320px;
    }
    .predictionItems li {
      float: left;
      width: 33%;
      text-align: center;
    }
      .predictionItems li i {
        display: block;
        width: 140px;
        height: 140px;
        margin: 43px auto 18px auto;
        /*background: url(../i/charging-icons-dashboard-pc.png) no-repeat 0 0;*/
        /*background: url(../i/charging-icons.png) no-repeat 0 0;*/
        background: url(../i/discover-icons.png) no-repeat 0 0;
      }
      .predictionItems .powerDishwasher i { background-position: -160px 0; }
      .predictionItems .powerAC i { background-position: -329px 0; }
      /*.predictionItems .buyOrLease i { background: url(../i/financial-loans-blue-icon.png) no-repeat 0 0 ; }*/
      /*.predictionItems .findAnInstaller i { background: url(../i/financial-loans-blue-icon.png) no-repeat 0 0 ; }*/
      .predictionItems .buyOrLease i { background-position: -164px 0; }
      .predictionItems .findAnInstaller i { background-position: -329px 0; }
      
      .predictionItems li p {
        font-size: 18px;
        max-width: 225px;
        margin: 0 auto;
        text-align: center;
        line-height: 28px;
        padding-bottom: 15px;
      }
        .predictionItems li p strong {
          color: #f87022;
          font-weight: 600;
        }



  .dashboard .actionRow {
    margin-top: 21px;
    margin-bottom: 56px;
  }
    .dashboard .actionRow .btn {
      min-width: 164px;
    }

  /*site detail page
  */
  .siteDetail h2 i {
    background-position: -203px -441px;
    width: 58px;
    height: 56px;
  }
  .siteDetailMainContent {
    border: 1px solid #ccc;
    width: 960px;
    margin: 0 auto;
    margin-bottom: 21px;
  }
    .evolHouse .content {
      /*height: 408px;*/
      height: 600px;
      /*border: 1px solid #ccc;*/
    }
      .evolHouse h3 {
        border-top: 0;
        font-size: 18px;
      }
        .siteDetail h3 i {
          background-position: -520px -213px;
          margin-top: 5px;
        }
        .siteDetail .collapsed i {
          background-position: -520px -243px;
        }

      .evolHouse .houseSetting {
        float: left;
        /* width: 302px; */
        border-right: 1px solid #ccc;
        height: 550px;
      }
        .houseSetting .slideRow i { background-position: -130px -513px; }
        .houseSetting .solarPanelsRow i { background-position: -197px -513px; }
        .houseSetting .panelOrientationRow i { background-position: -131px -553px; }
        .houseSetting .shadeRow i { background-position: -202px -556px; }
      .houseEffectCon {
        height: 408px;
        border: 0;
        margin-left: 303px;
      }
      .houseEffect {
        height: 408px;
        width: auto;
        margin: 0;
      }

  .resultsSection .content {
      /*height: 408px;*/
      /* height: 700px; */
      border: 1px solid #ccc;
    }
      .resultsSection h3 {
        /*border-top: 0;*/
        font-size: 18px;
      }
        .siteDetail h3 i {
          background-position: -520px -213px;
          margin-top: 5px;
        }
        .siteDetail .collapsed i {
          background-position: -520px -243px;
        }

      .resultsSection .houseSetting {
        float: left;
        width: 302px;
        border-right: 1px solid #ccc;
        height: 408px;
      }

  .tabbed{}
  .tabHead {
    height: 58px;
  }
    .tabHead ul{
      height: 58px;
      border-bottom: 0;
    }
    .tabHead ul li {
      height: 58px;
      border-bottom: 1px solid #ccc;
      box-shadow: none;
      background: transparent;
    }
    .tabHead ul .active {
      border-bottom: 0;
      box-shadow: 0px 0px 0px 1px #ccc;
      background: #fff;
    }
      .tabHead ul li a {
        display: block;
        font-size: 16px;
        line-height: 57px;
        color: #666;
      }
      .tabHead ul .active a { color: #666; }
      .tabHead ul li .long {
        line-height: 57px;
        padding-top: 0;
      }
      .tabHead ul li .wide { display: block; }
      .tabHead ul li .narrow { display: none; }
  .tabContent {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    min-height: 600px;
  }
    .totalRow {
      padding-top: 12px;
      font-size: 24px;
      margin: 15px 20px 20px 20px;
    }
      .totalRow strong {
        font-weight: 700;
        padding-bottom: 16px;
        font-size: 36px;
      }
    .dwellersRow,
    .sizeRow {
      padding: 14px 0 0 0;
      background: #f8f8f8;
      min-height: 112px;
      margin: 0;
    }
    .dwellersRow {
      width: 435px;
      text-align: center;
      /* float: left; */
      margin: auto;
    }
    .sizeRow {
      /* margin-left: 502px; */
      text-align: center;
      width: 436px;
      margin-bottom: 23px;
      margin:auto;
    }
      .dwellersRow .lbl,
      .sizeRow .lbl {
        float: none;
        width: auto;
        line-height: 18px;
        color: #333;
        padding-bottom: 13px;
        font-size: 18px;
      }
      .dwellersRow .val,
      .sizeRow .val {
        float: none;
        width: auto;
        text-align: center;
        padding-top: 12px;
      }
      .val .math {
        display: inline-block;
        vertical-align: top;
        width: 28px;
        height: 28px;
        margin: 0 6px;
        color: #333;
        margin-top: 2px;
        border-radius: 50%;
        background-color: #ccc;
      }
      .val .math.sub { background-position: -515px -298px; }
      .val .math.add { background-position: -515px -270px; }
      .val .math.gudtogo { background-color: #38b624; }

      .val .count {
        display: inline-block;
        vertical-align: top;
        font-size: 26px;
        min-width: 44px;
        text-align: center;
      }
      .sizeRow .val .count {
        font-size: 26px;
      }
        .val .count .unit {
          margin-left: 10px;
        }
      .val .count2 {
        display: inline-block;
        vertical-align: top;
        font-size: 26px;
        min-width: 34px;
        text-align: center;
      }
      .sizeRow .val .count2 {
        font-size: 36px;
      }
        .val .count2 .unit {
          margin-left: 10px;
        }
        .val .count500 {
        display: inline-block;
        vertical-align: top;
        font-size: 26px;
        min-width: 34px;
        text-align: center;
      }
      .sizeRow .val .count500 {
        font-size: 26px;
      }
        .val .count500 .unit {
          margin-left: 10px;
        }

        .val .count1 {
        display: inline-block;
        vertical-align: top;
        font-size: 26px;
        min-width: 34px;
        text-align: center;
      }
      .sizeRow .val .count1 {
        font-size: 26px;
      }
        .val .count1 .unit {
          margin-left: 10px;
        }

    .tabContent h4 {
      line-height: 56px;
      font-size: 18px;
      font-weight: 600;
      padding-top: 18px;
      padding-bottom: 8px;
      margin-left: 32px;
    }
      .tabContent h4 i {
        margin-right: 8px;
        width: 56px;
        height: 56px;
        background-position: -480px -12px;
      }
    .tabContent ol {
      margin-left: 102px;
    }
      .tabContent ol li {
        line-height: 20px;
        font-size: 18px;
        color: #333;
        padding-bottom: 9px;
      }
      .tabContent ol li > span{
        float: left;
      }
      .tabContent ol li > p {
        margin-left: 18px;
        display: block;
      }
    .tabContent .url {
      margin: 25px 20px 22px 20px;
      padding: 25px 0;
      text-align: center;
      min-height: 60px;
      font-size: 18px;
    }
    .tabContent .uploadData {
      border-top: 1px solid #ccc;
      margin-top: 8px;
    }
      .tabContent .uploadData .uploadRow,
      .tabContent .inputRow {
        width: 570px;
        margin: 38px auto;
      }
      .tabContent .uploadData .inputWrap,
      .tabContent .inputWrap {
        margin-right: 188px;
        border: 1px solid #ccc;
        border-radius: 3px;
        height: 50px;
      }
        .tabContent .uploadData .inputWrap input,
        .tabContent .inputWrap input {
          border: 0;
          outline: 0;
          padding: 15px;
          width: 90%;
          font-size: 15px;
        }
        .tabContent .uploadData .btn,
        .tabContent .inputRow .btn {
          float: right;
          width: 162px;
        }
    .tabContent .checkNote {
      margin: 20px;
      padding: 42px 0 30px 0;
      line-height: 15px;
      font-size: 16px;
      text-align: center;
    }
  /*sub tab style*/
  .subTab {
    border-top: 1px solid #ccc;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
  }
    /*well reuse the icons from retina icons*/
    .subTab .sprite {
      /* background-image: url(../i/icon-sprites-ret.png);
      background-size: 448px 581px; */
    }
    .subTab .tabSide {
      float: left;
      width: 303px;
      border-right: 1px solid #ccc;
      border-bottom: 0;
      height: 360px;
    }
      .subTab .tabSide ul {
        height: 100%;
      }
        .subTab .tabSide li {
          float: none;
          display: block;
          width: 100%;
          height: 60px;
          border-bottom: 1px solid #ccc;
        }
        .subTab .tabSide li:last-child {
          width: auto;
          border-bottom: 0;
        }
          .subTab .tabSide li a {
           color: #333;
           font-size: 16px;
          }
          .subTab .tabSide .active a,
          .subTab .tabSide li a:hover {
            border-left: 3px solid #f9955b;
            box-shadow: none;
            background-color: #f9955b;
          }
          .subTab .tabSide li i {
            width: 36px;
            height: 36px;
            display: inline-block;
            vertical-align: top;
            background-position: -281px -464px;
            margin-top: 12px;
            margin-left: 20px;
          }
          .subTab .tabSide .living i { background-position: -331px -467px; }
          .subTab .tabSide .kitchen i { background-position: -375px -466px; }
          .subTab .tabSide .bath i { background-position: -420px -468px; }
          .subTab .tabSide .office i { background-position: -464px -462px; }
          .subTab .tabSide .garage i { background-position: -498px -464px; }
          .subTab .tabSide li span {
            display: inline-block;
            vertical-align: top;
            font-size: 16px;
            line-height: 58px;
            margin-left: 15px;
          }


    .subTabContent {
      height: 360px;
    }
      .subTabContent .item {
        background: #f8f8f8;
        margin: 20px 0 0 20px;
        padding: 0;
        float: left;
        width: 135px;
        height: 135px;
      }
        .subTabContent .item i {
          width: 36px;
          height: 34px;
          display: block;
          float: none;
          margin: 20px auto;
        }
        .subTabContent .item > span {
          float: none;
          display: block;
          margin-top: 0;
          padding-bottom: 10px;
          text-align: center;
        }
        .subTabContent .item .val {
          float: none;
          display: block;
          text-align: center;
        }
          .subTabContent .item .val .count {
            font-size: 20px;
            position: relative;
            top: -3px;
          }
           .subTabContent .item .val .count2 {
            font-size: 30px;
            position: relative;
            top: -3px;
          }
          .subTabContent .item .val .count500 {
            font-size: 20px;
            position: relative;
            top: -3px;
          }

          .subTabContent .item .val .count1 {
            font-size: 20px;
            position: relative;
            top: -3px;
          }
          .subTabContent .item .val .math {
            width: 20px;
            height: 20px;
          }
          .subTabContent .item .val .math.sub {
            background-position: -273px -344px;
          }
          .subTabContent .item .val .math.add {
            background-position: -277px -361px;
          }

        /*icons*/
        .subTabContent .item.centralAC i { background-position: -279px -520px; }
        .subTabContent .item.evaporationCooler i { background-position: -326px -522px; }
        .subTabContent .item.unitAC i { background-position: -375px -536px; }
        .subTabContent .item.unitHeater i { background-position: -427px -527px; }
        .subTabContent .item.waterHeater i { background-position: -477px -520px; }
        .subTabContent .item.tv i { background-position: -513px -521px; }
        .subTabContent .item.stereo i { background-position: -274px -571px; }
        .subTabContent .item.dvd i { background-position: -326px -587px; }
        .subTabContent .item.lights i { background-position: -375px -571px; }
        .subTabContent .item.oven i { background-position: -424px -572px; }
        .subTabContent .item.microwave i { background-position: -469px -578px; }
        .subTabContent .item.refrigerator i { background-position: -520px -569px; }
        .subTabContent .item.toaster i { background-position: -6px -625px; }
        .subTabContent .item.dishwasher i { background-position: -51px -625px; }
        .subTabContent .item.coffeeMaker i { background-position: -105px -625px; }
        .subTabContent .item.blender i { background-position: -145px -624px; }
        .subTabContent .item.waterBoiler i { background-position: -189px -624px; }
        .subTabContent .item.hairDryer i { background-position: -230px -628px; }
        .subTabContent .item.whirlpoolTub i { background-position: -278px -622px; }
        .subTabContent .item.handDryer i { background-position: -333px -625px; }
        .subTabContent .item.pc i { background-position: -380px -624px; }
        .subTabContent .item.monitor i { background-position: -430px -624px; }
        .subTabContent .item.laptop i { background-position: -472px -628px; }
        .subTabContent .item.cellPhones i { background-position: -517px -620px; }
        .subTabContent .item.printer i { background-position: -6px -677px; }
        .subTabContent .item.washingMachine i { background-position: -54px -676px; }
        .subTabContent .item.dryer i { background-position: -102px -677px; }
        .subTabContent .item.freezer i { background-position: -162px -680px; }
        .subTabContent .item.iron i { background-position: -214px -686px; }
        .subTabContent .item.electricVehicle i { background-position: -271px -680px; }


  .houseSetting .slideRow .tuner {
    font-size: 16px;
  }
    .houseSetting .slideRow .tuner .val {
      font-size: 18px;
    }

    .houseEffectCon .shadeInfo {
      width: 350px;
      background: #f87022;
      left: 55%;
      margin-left: -175px;
      /* bottom: 20px; */
      right: auto;
      border-radius: 16px;
      text-align: center;
      line-height: 30px;
      height: 30px;
      font-size: 14px;
      font-weight: normal;
      color: #fff;
      z-index: 2;
      padding: 0 16px;
    }
/*3D scene*/
  /*compass*/
    .houseEffect .compass {
      background-size: 600px 600px;
      width: 600px;
      height: 600px;
      top: -81px;
      left: 25px;
    }

  /*the shades*/
  .effectStage .building {
    background: url(../i/rep-building.png) no-repeat 0 0;
    background-size: auto;
    width: 286px;
    height: 385px;
    transform: translateX(-67px) translateY(38px);
    -webkit-transform: translateX(-67px) translateY(38px);
    -moz-transform: translateX(-67px) translateY(38px);
  }
  .effectStage .treeModel {
    background: url(../i/rep-tree-small.png) no-repeat 0 0;
    background-size: auto;
    width: 97px;
    height: 184px;
    transform: translateX(98px) translateY(67px);
    -webkit-transform: translateX(98px) translateY(67px);
    -moz-transform: translateX(98px) translateY(67px);
  }
  .effectStage .treeModel.secondTree {
    background: url(../i/rep-tree-large.png) no-repeat 0 0;
    background-size: auto;
    width: 160px;
    height: 228px;
    transform: translateX(157px) translateY(120px);
    -webkit-transform: translateX(157px) translateY(120px);
    -moz-transform: translateX(157px) translateY(120px);
  }
    .effectStage .shadeModel {
      width: 144px;
      height: 171px;
      background: url(../i/shade-little.png) no-repeat 0 0;
      background-size: auto;
      transform: translateX(197px) translateY(111px);
      -webkit-transform: translateX(197px) translateY(111px);
      -moz-transform: translateX(197px) translateY(111px);
    }
    .effectStage .shadeModel.little {
      display: block;
    }
    .effectStage .shadeModel.med {
      display: block;
      background: url(../i/shade-med.png) no-repeat 0 0;
      background-size: auto;
      transform: translateX(202px) translateY(105px);
      -webkit-transform: translateX(202px) translateY(105px);
      -moz-transform: translateX(202px) translateY(105px);
    }
    .effectStage .shadeModel.lots {
      display: block;
      background: url(../i/shade-lots.png) no-repeat 0 0;
      background-size: auto;
      height: 228px;
      transform: translateX(212px) translateY(52px);
      -webkit-transform: translateX(212px) translateY(52px);
      -moz-transform: translateX(212px) translateY(52px);
    }
  /*the house begins here*/
  .effectStage .house {
    width: 265px;
    height: 262px;
    background: url(../i/house-flat.png) no-repeat center 0;
    background-size: auto;
    transform: translateX(192px) translateY(23px);
    -webkit-transform: translateX(192px) translateY(23px);
    -moz-transform: translateX(192px) translateY(23px);
  }
  .effectStage .house.medSlope {
    background: url(../i/house-med.png) no-repeat 0 33px;
    background-size: auto;
  }
  .effectStage .house.highSlope {
    background: url(../i/house-high.png) no-repeat 0 0;
    background-size: auto;
  }
  .effectStage .solarPanels {
    width: 200px;
    height: 153px;
    transform: translateX(192px) translateY(58px);
    -webkit-transform: translateX(192px) translateY(58px);
    -moz-transform: translateX(192px) translateY(58px);
  }
  .effectStage .solarPanels.highS {
    transform: translateX(197px) translateY(31px);
    -webkit-transform: translateX(197px) translateY(31px);
    -moz-transform: translateX(197px) translateY(31px);
  }
  .effectStage .solarPanels.noS {
      width: 230px;
      height: 135px;
      transform: translateX(210px) translateY(23px);
      -webkit-transform: translateX(210px) translateY(23px);
      -moz-transform: translateX(210px) translateY(23px);
  }
    .effectStage .solarPanels .rw {
      background: url(../i/med-slope-bar.png) no-repeat 3px 3px;
      background-size: auto;
      width: 175px;
      height: 75px;
      transform: translateX(58px) translateY(13px);
      -webkit-transform: translateX(58px) translateY(13px);
      -moz-transform: translateX(58px) translateY(13px);
    }
    .effectStage .solarPanels.highS .rw {
      background-image: url(../i/high-slope-bar.png);
      background-size: auto;
      transform: translateX(53px) translateY(10px);
      -webkit-transform: translateX(53px) translateY(10px);
      -moz-transform: translateX(53px) translateY(10px);
    }
    .effectStage .solarPanels.noS .rw {
      background-image: url(../i/flat-slope-bar.png);
      background-size: auto;
      transform: translateX(96px) translateY(2px);
      -webkit-transform: translateX(96px) translateY(2px);
      -moz-transform: translateX(96px) translateY(2px);
    }
    .effectStage .solarPanels .rw:nth-of-type(2) {
      transform: translateX(42px) translateY(33px);
      -webkit-transform: translateX(42px) translateY(33px);
      -moz-transform: translateX(42px) translateY(33px);
    }
    .effectStage .solarPanels.highS .rw:nth-of-type(2) {
      transform: translateX(37px) translateY(36px);
      -webkit-transform: translateX(37px) translateY(36px);
      -moz-transform: translateX(37px) translateY(36px);
    }
    .effectStage .solarPanels.noS .rw:nth-of-type(2) {
      transform: translateX(68px) translateY(18px);
      -webkit-transform: translateX(68px) translateY(18px);
      -moz-transform: translateX(68px) translateY(18px);
    }
    .effectStage .solarPanels .rw:nth-of-type(3) {
      transform: translateX(26px) translateY(53px);
      -webkit-transform: translateX(26px) translateY(53px);
      -moz-transform: translateX(26px) translateY(53px);
    }
    .effectStage .solarPanels.highS .rw:nth-of-type(3) {
      transform: translateX(22px) translateY(62px);
      -webkit-transform: translateX(22px) translateY(62px);
      -moz-transform: translateX(22px) translateY(62px);
    }
    .effectStage .solarPanels.noS .rw:nth-of-type(3) {
      transform: translateX(40px) translateY(34px);
      -webkit-transform: translateX(40px) translateY(34px);
      -moz-transform: translateX(40px) translateY(34px);
    }
    .effectStage .solarPanels .rw:nth-of-type(4) {
      transform: translateX(10px) translateY(72px);
      -webkit-transform: translateX(10px) translateY(72px);
      -moz-transform: translateX(10px) translateY(72px);
    }
    .effectStage .solarPanels.highS .rw:nth-of-type(4) {
      transform: translateX(7px) translateY(87px);
      -webkit-transform: translateX(7px) translateY(87px);
      -moz-transform: translateX(7px) translateY(87px);
    }
    .effectStage .solarPanels.noS .rw:nth-of-type(4) {
      transform: translateX(13px) translateY(50px);
      -webkit-transform: translateX(13px) translateY(50px);
      -moz-transform: translateX(13px) translateY(50px);
    }
      .effectStage .solarPanels .rw i {
        display: inline-block;
        width: 41px;
        height: 39px;
        background: url(../i/panel-single-med.png) no-repeat 0 0;
        background-size: auto;
      }
      .effectStage .solarPanels.highS .rw i {
        background-image: url(../i/panel-single-high.png);
        background-size: auto;
      }
      .effectStage .solarPanels.noS .rw i {
        background-image: url(../i/panel-single-flat.png);
        background-size: auto;
        width: 36px;
        height: 34px;
      }
      .effectStage .solarPanels .rw i:nth-of-type(1) {
        transform: translateX(-1px) translateY(-4px);
        -webkit-transform: translateX(-1px) translateY(-4px);
        -moz-transform: translateX(-1px) translateY(-4px);
      }
      .effectStage .solarPanels.highS .rw i:nth-of-type(1) {
        transform: translateX(-2px) translateY(-5px);
        -webkit-transform: translateX(-2px) translateY(-5px);
        -moz-transform: translateX(-2px) translateY(-5px);
      }
      .effectStage .solarPanels.noS .rw i:nth-of-type(1) {
        transform: translateX(-2px) translateY(-5px);
        -webkit-transform: translateX(-2px) translateY(-5px);
        -moz-transform: translateX(-2px) translateY(-5px);
      }
      .effectStage .solarPanels .rw i:nth-of-type(2) {
        transform: translateX(-13px) translateY(11px);
        -webkit-transform: translateX(-13px) translateY(11px);
        -moz-transform: translateX(-13px) translateY(11px);
      }
      .effectStage .solarPanels.highS .rw i:nth-of-type(2) {
        transform: translateX(-13px) translateY(13px);
        -webkit-transform: translateX(-13px) translateY(13px);
        -moz-transform: translateX(-13px) translateY(13px);
      }
      .effectStage .solarPanels.noS .rw i:nth-of-type(2) {
        transform: translateX(-11px) translateY(10px);
        -webkit-transform: translateX(-11px) translateY(10px);
        -moz-transform: translateX(-11px) translateY(10px);
      }
      .effectStage .solarPanels .rw i:nth-of-type(3) {
        transform: translateX(-25px) translateY(27px);
        -webkit-transform: translateX(-25px) translateY(27px);
        -moz-transform: translateX(-25px) translateY(27px);
      }
      .effectStage .solarPanels.highS .rw i:nth-of-type(3) {
        transform: translateX(-23px) translateY(30px);
        -webkit-transform: translateX(-23px) translateY(30px);
        -moz-transform: translateX(-23px) translateY(30px);
      }
      .effectStage .solarPanels.noS .rw i:nth-of-type(3) {
        transform: translateX(-19px) translateY(25px);
        -webkit-transform: translateX(-19px) translateY(25px);
        -moz-transform: translateX(-19px) translateY(25px);
      }
      .effectStage .solarPanels .rw i:nth-of-type(4) {
        transform: translateX(-37px) translateY(43px);
        -webkit-transform: translateX(-37px) translateY(43px);
        -moz-transform: translateX(-37px) translateY(43px);
      }
      .effectStage .solarPanels.highS .rw i:nth-of-type(4) {
        transform: translateX(-33px) translateY(47px);
        -webkit-transform: translateX(-33px) translateY(47px);
        -moz-transform: translateX(-33px) translateY(47px);
      }
      .effectStage .solarPanels.noS .rw i:nth-of-type(4) {
        transform: translateX(-28px) translateY(41px);
        -webkit-transform: translateX(-28px) translateY(41px);
        -moz-transform: translateX(-28px) translateY(41px);
      }


  /*footer styles*/
  #footer {
    /* min-height: 246px; */
    max-height: 5%;
    position:relative;
    left:0;
    bottom:0;
    right:0;
  }
  #footer .address {
    float: left;
  }
  #footer .social,
  #footer .footerNote,
  #footer .footerNav {
    text-align: right;
  }
  #footer .address div {
    min-height: 42px;
  }
  #footer .address i {
    background-position: -302px -416px;
    width: 36px;
    height: 36px;
    border-radius: 18px;
  }
  #footer .address .tel i {
    background-position: -337px -417px;
  }
  #footer .address .email i {
    background-position: -373px -417px;
  }
  #footer .social a {
    background-position: -408px -417px;
    width: 36px;
    height: 36px;
    border-radius: 18px;
  }
  #footer .social .plus {
    background-position: -439px -416px;
  }
  #footer .social .twitter {
    background-position: -472px -413px;
  }
  #footer .social .facebook {
    background-position: -504px -414px;
  }

.dashboardItems .tool-icon,
  .tool-icon {
      height: 17px;
      width: 17px;
  }
  
  .dashboardItems .tool-icon {
      margin-left: 6px;
  }
  
}

/*Tooltip styles*/
.qtip {
    background-color: #fae6a1;
    border: 1px solid #f87022;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.07);
    width: 369px;
    max-width: 100%;
}

.qtip-content {
    color: #333;
    font-size: 14px;
    font-weight: 300;
    line-height: 16px;
    padding: 15px;
}

/*Custom CSS*/

.headings{
    font-size : 18px;
}